<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>留言板 - 伊蕾娜</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#FF75A0',
            secondary: '#FFD6E0',
            accent: '#B388EB',
            dark: '#2A2F4F',
            light: '#FDEFF4'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
      }
      .text-shadow-lg {
        text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
      }
      .animate-float {
        animation: float 6s ease-in-out infinite;
      }
      .animate-pulse-slow {
        animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      .bg-gradient-hero {
        background: linear-gradient(135deg, #FF75A0 0%, #B388EB 100%);
      }
      .page-transition {
        transition: opacity 0.5s ease, transform 0.5s ease;
      }
      .page-enter {
        opacity: 0;
        transform: translateX(30px);
      }
      .page-exit {
        opacity: 0;
        transform: translateX(-30px);
      }
      .mobile-menu-visible {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
      }
      .message-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      .message-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
      }
    }

    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-15px); }
      100% { transform: translateY(0px); }
    }
  </style>
</head>
<body class="bg-light text-dark min-h-screen flex flex-col page-enter">
  <!-- 导航栏 -->
  <nav class="bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-50 transition-all duration-300">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-heart text-primary text-2xl"></i>
        <h1 class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">伊蕾娜</h1>
      </div>
      <div class="hidden md:flex items-center space-x-6">
        <a href="index.html" class="text-dark hover:text-primary transition-colors duration-200 font-medium">首页</a>
        <a href="about.html" class="text-dark hover:text-primary transition-colors duration-200 font-medium">关于伊蕾娜</a>
        <a href="gallery.html" class="text-dark hover:text-primary transition-colors duration-200 font-medium">图片</a>
        <a href="message.html" class="text-primary font-medium">留言板</a>
        <a href="index.html#share" class="text-dark hover:text-primary transition-colors duration-200 font-medium">分享</a>
      </div>
      <!-- 移动端菜单按钮 -->
      <button class="md:hidden text-dark text-xl" id="mobile-menu-button">
        <i class="fa fa-bars"></i>
      </button>
    </div>
    <!-- 移动端菜单 -->
    <div id="mobile-menu" class="md:hidden bg-white shadow-lg absolute w-full left-0 top-full transform -translate-y-full opacity-0 transition-all duration-300 pointer-events-none">
      <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
        <a href="index.html" class="text-dark hover:text-primary transition-colors duration-200 font-medium py-2 border-b border-gray-100">首页</a>
        <a href="about.html" class="text-dark hover:text-primary transition-colors duration-200 font-medium py-2 border-b border-gray-100">关于伊蕾娜</a>
        <a href="gallery.html" class="text-dark hover:text-primary transition-colors duration-200 font-medium py-2 border-b border-gray-100">图片</a>
        <a href="message.html" class="text-primary font-medium py-2 border-b border-gray-100">留言板</a>
        <a href="index.html#share" class="text-dark hover:text-primary transition-colors duration-200 font-medium py-2">分享</a>
      </div>
    </div>
  </nav>

  <!-- 主内容区 -->
  <main class="flex-grow container mx-auto px-4 py-12">
    <section class="max-w-4xl mx-auto">
      <div class="text-center mb-12 page-transition">
        <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">伊蕾娜留言板</h2>
        <p class="text-dark/70">留下你对伊蕾娜的喜爱和感想吧！</p>
        <div class="w-20 h-1 bg-primary mx-auto rounded-full mt-4"></div>
      </div>

      <!-- 留言表单 -->
      <div class="bg-white rounded-2xl shadow-lg p-6 md:p-8 mb-12 page-transition">
        <h3 class="text-xl font-bold text-dark mb-6">写下你的留言</h3>
        <form id="message-form" class="space-y-4">
          <div>
            <label for="name" class="block text-dark/80 mb-2 font-medium">你的名字</label>
            <input type="text" id="name" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="请输入你的名字" required>
          </div>
          <div>
            <label for="message" class="block text-dark/80 mb-2 font-medium">留言内容</label>
            <textarea id="message" rows="4" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="请输入你的留言..." required></textarea>
          </div>
          <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-300 flex items-center justify-center">
            <i class="fa fa-paper-plane mr-2"></i>提交留言
          </button>
        </form>
      </div>

      <!-- 留言列表 -->
      <div class="page-transition">
        <h3 class="text-xl font-bold text-dark mb-6 flex items-center">
          <i class="fa fa-comments text-primary mr-2"></i>大家的留言
        </h3>
        <div id="messages-container" class="space-y-4">
          <!-- 留言会通过JavaScript动态加载 -->
          <div class="text-center text-dark/50 py-12" id="empty-message">
            <i class="fa fa-comment-o text-5xl mb-4 block"></i>
            <p>还没有留言，快去写下第一条留言吧！</p>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-10 mt-16">
    <div class="container mx-auto px-4">
      <div class="border-t border-white/10 mt-8 pt-8 text-center text-white/50 text-sm">
        <p>© 2025 伊蕾娜粉丝站</p>
      </div>
    </div>
  </footer>

  <!-- 提示消息 -->
  <div id="toast" class="fixed bottom-6 left-1/2 transform -translate-x-1/2 bg-dark text-white px-6 py-3 rounded-lg shadow-xl translate-y-16 opacity-0 transition-all duration-300 flex items-center z-50">
    <i class="fa fa-info-circle mr-2"></i>
    <span id="toast-message"></span>
  </div>

  <script>
    // 页面加载动画
    document.addEventListener('DOMContentLoaded', () => {
      document.body.classList.remove('page-enter');
    });

    // 移动端菜单切换
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    mobileMenuButton.addEventListener('click', () => {
      if (mobileMenu.classList.contains('mobile-menu-visible')) {
        mobileMenu.classList.remove('mobile-menu-visible');
        mobileMenuButton.innerHTML = '<i class="fa fa-bars"></i>';
      } else {
        mobileMenu.classList.add('mobile-menu-visible');
        mobileMenuButton.innerHTML = '<i class="fa fa-times"></i>';
      }
    });

    // 滚动时导航栏效果
    window.addEventListener('scroll', () => {
      const nav = document.querySelector('nav');
      if (window.scrollY > 50) {
        nav.classList.add('py-2', 'shadow-md');
        nav.classList.remove('py-3', 'shadow-sm');
      } else {
        nav.classList.add('py-3', 'shadow-sm');
        nav.classList.remove('py-2', 'shadow-md');
      }
    });

    // 留言板功能
    const messageForm = document.getElementById('message-form');
    const messagesContainer = document.getElementById('messages-container');
    const emptyMessage = document.getElementById('empty-message');
    const nameInput = document.getElementById('name');
    const messageInput = document.getElementById('message');
    const toast = document.getElementById('toast');
    const toastMessage = document.getElementById('toast-message');

    // 显示提示消息
    function showToast(message) {
      toastMessage.textContent = message;
      toast.classList.remove('translate-y-16', 'opacity-0');
      toast.classList.add('translate-y-0', 'opacity-100');

      setTimeout(() => {
        toast.classList.remove('translate-y-0', 'opacity-100');
        toast.classList.add('translate-y-16', 'opacity-0');
      }, 3000);
    }

    // 替换原有的saveMessage函数
    function saveMessage(name, content) {
      const headers = {
        'Accept': 'application/json, text/plain, */*',
        'Accept-Language': 'zh-CN,zh;q=0.9',
        'Authorization': 'bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NTMsIm5hbWUiOiLlraYxMDEiLCJlbWFpbCI6bnVsbCwidXNlclR5cGUiOiIxIiwiYXZhdGFyX3VybCI6Imh0dHBzOi8vZ2l0ZWUuY29tL2Fzc2V0cy9ub19wb3J0cmFpdC5wbmciLCJpYXQiOjE3NTI5ODg4MTgsImV4cCI6MTc1MzU5MzYxOH0.71PxhnCfH_Gum_G04kg2dxa6EzhYWPdNyAQg0wmIeT0',
        'Connection': 'keep-alive',
        'Content-Type': 'application/json',
        'Origin': 'http://shli617.top',
        'Referer': 'http://shli617.top/publish',
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36'
      };
    
      const json_data = {
        'content': content,
        'privacy': 0,
        'text_color': ''
      };
    
      return fetch('http://shli617.top/api/user/api/saveMsg', {
        method: 'POST',
        headers: headers,
        body: JSON.stringify(json_data),
        mode: 'cors'
      })
      .then(response => response.json())
      .then(data => {
        if (data.code === 0 || data.msg !== 'jwt must be provided') {
          return true;
        } else {
          console.error('API Error:', data);
          return false;
        }
      })
      .catch(error => {
        console.error('Network Error:', error);
        return false;
      });
    }

    // 修改原有的loadMessages函数
    function loadMessages() {
      const headers = {
        'Accept': 'application/json, text/plain, */*',
        'Accept-Language': 'zh-CN,zh;q=0.9',
        'Authorization': 'bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NTMsIm5hbWUiOiLlraYxMDEiLCJlbWFpbCI6bnVsbCwidXNlclR5cGUiOiIxIiwiYXZhdGFyX3VybCI6Imh0dHBzOi8vZ2l0ZWUuY29tL2Fzc2V0cy9ub19wb3J0cmFpdC5wbmciLCJpYXQiOjE3NTI5ODg4MTgsImV4cCI6MTc1MzU5MzYxOH0.71PxhnCfH_Gum_G04kg2dxa6EzhYWPdNyAQg0wmIeT0',
        'Connection': 'keep-alive',
        'Origin': 'http://shli617.top',
        'Referer': 'http://shli617.top/publish',
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36'
      };
    
      return fetch('http://shli617.top/api/user/api/noAuth/worldMsg?', {
        method: 'GET',
        headers: headers,
        mode: 'cors'
      })
      .then(response => response.json())
      .then(data => {
        // 假设API返回格式为{data: [{id: 1, content: '...', createTime: '...', user: {name: '...'}},...]}
        return data.data || [];
      })
      .catch(error => {
        console.error('Network Error:', error);
        return [];
      });
    }

    // 修改原有的renderMessages函数为异步函数
    async function renderMessages() {
      const messages = await loadMessages();
    
      // 如果没有留言，显示空状态
      if (messages.length === 0) {
        emptyMessage.style.display = 'block';
        return;
      }
    
      // 隐藏空状态
      emptyMessage.style.display = 'none';

      // 清空现有留言
      messagesContainer.innerHTML = '';

      // 按时间戳排序留言，最新的在前
      const sortedMessages = [...messages].sort((a, b) => {
        const dateA = new Date(a.create_time || a.date);
        const dateB = new Date(b.create_time || b.date);
        return dateB - dateA; // 降序排序
      });

      // 添加留言到容器
      sortedMessages.forEach(message => {
        const date = new Date(message.create_time || message.date);
        const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    
        const messageCard = document.createElement('div');
        messageCard.className = 'bg-white rounded-xl shadow-md p-6 message-card';
        messageCard.innerHTML = `
          <div class="flex justify-between items-start mb-2">
            <h4 class="font-bold text-dark">${message.user?.name || '匿名用户'}</h4>
            <span class="text-sm text-dark/50">${formattedDate}</span>
          </div>
          <p class="text-dark/80 whitespace-pre-line">${message.content}</p>
        `;
    
        messagesContainer.appendChild(messageCard);
      });
    }

    // 修改表单提交事件处理
    messageForm.addEventListener('submit', async (e) => {
      e.preventDefault();
    
      const name = nameInput.value.trim();
      const content = messageInput.value.trim();
    
      if (!name || !content) {
        showToast('请填写完整的信息');
        return;
      }
    
      // 调用API保存留言
      const success = await saveMessage(name, content);
    
      if (success) {
        // 重新渲染留言列表
        await renderMessages();
    
        // 重置表单
        messageForm.reset();
    
        // 显示成功提示
        showToast('留言提交成功！');
      } else {
        showToast('留言提交失败，请稍后重试');
      }
    });

    // 修改页面加载时渲染留言的方式
    document.addEventListener('DOMContentLoaded', async () => {
      document.body.classList.remove('page-enter');
      await renderMessages();
    });
  </script>
</body>
</html>